<template>
	<div class="span-item"
			@click="dRouter(routerPath)">
		<div class="item-title">{{spanTitle}}</div>
		<van-image class="item-img"
							:src="spanImage" />
	</div>
</template>
<script>
export default {
	name: "SpanItem",
	props: {
		spanTitle: {
			required: true,
			type: String,
			default: "功能名称"
		},
		spanImage: {
			required: true,
			type: String,
			default: require("../assets/接种出苗.png")
		},
		routerPath: {
			required: true,
			type: String,
			default: "/"
		}
	},
	methods: {
		dRouter (rP) {
			this.$router.push({ path: rP });
		}
	}
}
</script>
<style scoped>
.span-item {
	width: 280px;
	height: 200px;
	opacity: 0.9;
	border-radius: 25px;
	box-shadow: 0 5px 30px 10px rgba(19, 18, 23, 0.3);
	background: linear-gradient(0deg, #5e18a3, #2672ff 100%, #c97dff 0);
	margin: 20px;
	float: left;
	cursor: pointer;
}
.item-title {
	font-size: 25px;
	font-weight: 400;
	color: #ffffff;
	text-align: left;
	margin-left: 30px;
	margin-top: 20px;
}
.item-img {
	width: 80%;
	margin-top: 20px;
}
</style>